<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right: 20px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="condition.brand" left size="small" placeholder="请选择品牌" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>

			<el-col :span="1" style="margin-right: 10px;">
				<p class="queryLabel">单位:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请选择单位" size="small" icon="search" v-model="compenyL.companyLabel" :on-icon-click="handleIconClick">
				</el-input>
			</el-col>

			<el-col :span="1" style="margin-right:0px;">
				<p class="queryLabel">仓库:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="warehouseIds" left size="small" placeholder="请选择仓库" clearable>
					<el-option v-for="item in warehouseCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>

			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">预警类型:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="condition.warningType" left size="small" placeholder="请选择预警类型" clearable>
					<el-option v-for="item in warningTypecombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>

		</el-row>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:25px;">
				<p class="queryLabel">已预警天数:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" v-model="condition.starts">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:5px;">
				<p class="queryLabel">至</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" style="margin-left:0px;" v-model="condition.stops">
				</el-input>
			</el-col>

			<el-col :span="1" style="margin-right: 5px;">
				<p class="queryLabel">车系:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请选择车系" size="small" icon="search" v-model="carse.carSerieslabel" :on-icon-click="handleIconCar">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:7px;">
				<p class="queryLabel">车型:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="condition.carModel" left size="small" placeholder="请选择车型" clearable>
					<el-option v-for="item in carModelCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="5" styl e="padding-left: 7px;text-align: center">
				<el-button type="primary" size="small" @click='barQuery'>查询</el-button>
				<el-button type="primary" size="small" @click="clean">清空查询条件</el-button>
			</el-col>
		</el-row>

		<el-row :gutter="24">

			<el-col :span="14"  :offset="3">
				<div id="charts">
					<div id="zxmain" :style="{width:'800px',height:'350px'}"></div>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="24">

			<el-col :span="24">
				<el-table :data="tableData.dataList" border @selection-change="handleSelectionChange" style="width: 100%;align-content: center;">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="VIN" prop="vin" width="180">
					</el-table-column>
					<el-table-column label="库龄" prop="stockDay" width="100">
					</el-table-column>
					<el-table-column label="车系名称" prop="carSeries" width="100">
					</el-table-column>
					<el-table-column label="车型名称" prop="carModel" width="150">
					</el-table-column>
					<el-table-column label="配置名称" prop="configure" width="120">
					</el-table-column>
					<el-table-column label="车型年" prop="carModelYear" width="100">
					</el-table-column>
					<el-table-column label="外观颜色" prop="appearanceName" width="100">
					</el-table-column>
					<el-table-column label="内饰名称" prop="trimName" width="100">
					</el-table-column>
					<el-table-column label="加装名称" prop="chooseName" width="100">
					</el-table-column>
					<el-table-column label="车型代码" prop="carModelCode" width="100">
					</el-table-column>
					<el-table-column label="外观代码" prop="appearanceCode" width="100">
					</el-table-column>
					<el-table-column label="内饰代码" prop="trimCode" width="100">
					</el-table-column>
					<el-table-column label="加装代码" prop="chooseCode" width="100">
					</el-table-column>
					<el-table-column label="入库日期" prop="enterDate" width="120">
					</el-table-column>
					<el-table-column label="采购价格" prop="purchasePrice" width="100">
					</el-table-column>
					<el-table-column label="采购日期" prop="purchaseDate1" width="120">
					</el-table-column>
					<el-table-column label="采购单号" prop="purchaseNum" width="100">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
			<company :show="showCompany" v-if="showCompany" v-on:close="showCompany=false" v-on:insert="insert"></company>
			<carserice :show="showStart" v-if="showStart" v-on:close="showStart=false" v-on:insert="inserts"></carserice>
			<el-dialog v-model="dialogform">
				<el-form :model="dataFormModelData" label-width="100px" ref="datamodelForm" :rules="modelRule">
					<el-form-item label="VIN:" prop="vin">
						<el-input size="small" v-model="dataFormModelData.vin" readonly></el-input>
					</el-form-item>
					<el-form-item label="采购价格:" prop="purchasePrice">
						<el-input size="small" v-model="dataFormModelData.purchasePrice" readonly></el-input>
					</el-form-item>
					<el-form-item label="采购日期:" prop="purchaseDate">
						<el-input size="small" v-model="dataFormModelData.purchaseDate" readonly></el-input>
					</el-form-item>
					<el-form-item label="采购单号:" prop="purchaseNum">
						<el-input size="small" v-model="dataFormModelData.purchaseNum" readonly></el-input>
					</el-form-item>
					<el-form-item label="车系名称:" prop="carSeries">
						<el-input size="small" v-model="dataFormModelData.carSeriesId" readonly></el-input>
					</el-form-item>
					<el-form-item label="车型代码:" prop="carModelCode">
						<el-input-number v-model="dataFormModelData.carModelCode" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="车型名称:" prop="carModel">
						<el-input-number v-model="dataFormModelData.carModel" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="配置代码:" prop="configureCode">
						<el-input-number v-model="dataFormModelData.configureCode" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="配置名称:" prop="configureName">
						<el-input-number v-model="dataFormModelData.configureName" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="车型年:" prop="carModelYear">
						<el-input-number v-model="dataFormModelData.carModelYear" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="外观代码:" prop="appearanceCode">
						<el-input-number v-model="dataFormModelData.appearanceCode" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="外观颜色:" prop="appearanceName">
						<el-input-number v-model="dataFormModelData.appearanceName" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="内饰代码:" prop="interiorCode">
						<el-input-number v-model="dataFormModelData.interiorCode" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="内饰名称:" prop="trimName">
						<el-input-number v-model="dataFormModelData.trimName" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="加装代码:" prop="chooseCode">
						<el-input-number v-model="dataFormModelData.chooseCode" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="入库日期:" prop="enterDate">
						<el-input-number v-model="dataFormModelData.enterDate" readonly></el-input-number>
					</el-form-item>
					<el-form-item label="库龄:" prop="carAge">
						<el-input-number v-model="dataFormModelData.carAge" readonly></el-input-number>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-row>
	</div>
</template>
<script>
	//window.name = "";
	window.chartName = "";
	window.functionClick=Function;
	import company from '../../insPlugins/company.vue'
	import carserice from '../../insPlugins/carSeries.vue'
	import moment from 'moment'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				//chartType: "",
				showCompany: false,
				showStart: false,
				dialogform: false,
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},
				multipleSelection: [],
				configureCombo: [], //配置查询数据
				warehouseCombo: [],
				warningTypecombo: [],
				carModelCombo: [],
				brandCombo: [],
				modelRule: {},
				condition: {
					companyId: [],
					warehouseId: [],
					brand: "",
					starts: "",
					stops: "",
					carSeries: "",
					carModel: "",
					warningType: "",

				},
				conditions: {
					companyId: [],
					warehouseId: [],
					brand: "",
					starts: "",
					stops: "",
					carSeries: "",
					carModel: "",
					warningType: "",

				},
				warehouseIds:"",
				emptyData: {
					vin: '',
					purchasePrice: '',
					purchaseDate: '',
					purchaseNum: '',
					carSeries: '',
					carModelCode: '',
					carModel: '',
					configureCode: '',
					configureName: '',
					carModelYear: '',
					appearanceCode: '',
					appearanceName: '',
					interiorCode: '',
					trimName: '',
					chooseCode: '',
					enterDate: '',
					carAge: '',
				},
				//表单数据
				dataFormModelData: {
					vin: '',
					purchasePrice: '',
					purchaseDate: '',
					purchaseNum: '',
					carSeries: '',
					carModelCode: '',
					carModel: '',
					configureCode: '',
					configureName: '',
					carModelYear: '',
					appearanceCode: '',
					appearanceName: '',
					interiorCode: '',
					trimName: '',
					chooseCode: '',
					enterDate: '',
					carAge: '',
				},
				compenyL: {
					companyLabel: "",
				},
				carse: {
					carSerieslabel: "",
				},
				dataLists: [],
				names: [],
			}

		},
		components: {
			company,
			carserice,
		},
		methods: {
			
			//清空查询条件
			clean: function() {
				this.$data.condition = Object.assign(this.$data.condition, this.$data.conditions);
				this.$data.compenyL.companyLabel="";
				this.$data.condition.carModel="";
				this.$data.carModelCode = "";
			},
			//var aaaa = this.option;
			mounteds: function() {
				var aaa = this;
				functionClick=this.detailQuery;
				//柱形图赋值
				if(document.getElementById('zxmain') == null) {
					return;
				}
				debugger;
				var myChart = echarts.init(document.getElementById('zxmain'));

				var option = {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: this.$data.names,
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '数量',
						type: 'bar',
						barWidth: '60%',
						data: this.$data.dataLists
					}]
				};
				myChart.setOption(option);
				myChart.on('click', function(param) {
					//name = param.name;
					debugger;
					chartName = param.name;
					functionClick();

				});

			},
			//type获取函数
			getType: function(x, y) { //x:车系 y:车型
				var temp = "";
				if(x == '' && y == '') { // 车系
					temp = 0;

				};
				if(x != '' && y == '') {
					temp = 1;

				};
				if(x != '' && y != '') {
					temp = 2;

				}
				return temp;
				//condition.carModel车型
				//carse.carSerieslabel车系
			},
			//查询
			detailQuery: function() {
				debugger;
				var xing = this.$data.condition.carModel;
				var xi = this.$data.carse.carSerieslabel;
				var type = this.getType(xi, xing);
				//this.$data.condition.warehouseId[0]=this.$data.warehouseIds;
				//var charName = chartName;
				this.$http.post(this.API_ROOT + '/scm/warningReport/warningPage', this.$data.condition, {
					params: {
						type: type,
						name: chartName,
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize,
					}
				}).then((resp) => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total); // 数据条数
						// es5写法
						this.$data.tableData = resp.data;
						debugger;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
					debugger;
				}, (resp) => {});
			},
			//柱状图查询
			barQuery: function() {
				this.$data.condition.warehouseId[0]=this.$data.warehouseIds;
				debugger;
				this.$http.post(this.API_ROOT + '/scm/warningReport/warningReport', this.$data.condition, {
					params: {}
				}).then((response) => {
					debugger;
					if(response.data.dataList != undefined) {
						this.$data.dataLists = response.data.dataList;
						debugger;
						this.$data.names=[];
						for(var i = 0; i < response.data.dataList.length; i++) {
							this.$data.names[i] = response.data.dataList[i].name
						}
					} else {
						this.$message.error(resp.data.msg);
					}
					chartName=""
					this.mounteds();
					this.detailQuery();
				}, (response) => {});
			},
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.detailQuery();
			},
			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showCompany = true;
			},
			handleIconCar: function() {
				this.$data.showStart = true;
			},

			//单位选择的回调
			insert: function(val, lable) {
				debugger;
				this.$data.condition.companyId = val;
				this.$data.compenyL.companyLabel = lable;
				//单位
				this.$http.post(this.API_ROOT + '/scm/warehouse/comboIn', this.$data.condition.companyId, {
					params: {}
				}).then((response) => {
					debugger;
					this.$data.warehouseCombo = response.data;
					//this.$message(response.data);
				}, (response) => {});

			},
			//车型车系
			inserts: function(val, lable) {
				debugger;

				this.$data.condition.carSeries = val;
				this.$data.carse.carSerieslabel = lable;
				this.$http.get(this.API_ROOT + '/base/carModel/combo', {
					params: {
						seriesId: val
					}
				}).then((response) => {
					debugger;
					this.$data.carModelCombo = response.data;
					this.$data.condition.carModel = "";
					//this.$message(response.data);
				}, (response) => {});

			},
		},
		//表单创建时执行
		created: function() {
			this.$http.post(this.API_ROOT + '/base/brand/combo', {
				params: {}
			}).then((response) => {
				debugger;
				this.$data.brandCombo = response.data;
			}, (response) => {});

			//获取预警类型下拉
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "warningType"
				}
			}).then((response) => {
				this.$data.warningTypecombo = response.data;
			}, (response) => {});
		},
		//页面渲染完执行
		//		mounted: function() {
		//			this.mounteds();
		//		}
	}
</script>

<style>
	.zhi {
		width: 15px;
		text-align: center;
		line-height: 28px;
	}
	
	.dayNum {
		display: none;
	}
	
	.dayNums {
		display: none;
	}
</style>